<template>
  <div class="jaguar-view">
    <div class="jaguar-search">
      <el-form :inline="true" :model="searchForm" @submit.prevent>
        <search-input
          label="访问账号"
          v-model="searchForm.createBy"
          :search="getData"
        />

        <el-form-item label="接口名称">
          <el-select
            v-model="searchForm.apiOperation"
            filterable
            placeholder="请选择或输入接口名称"
            clearable
            @change="getData"
          >
            <el-option
              v-for="apiOperation in apiOperations"
              :key="apiOperation"
              :label="apiOperation"
              :value="apiOperation"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="访问时间">
          <el-date-picker
            v-model="searchForm.accessTime"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>

        <el-divider>
          <el-button
            text
            type="primary"
            @click="showAdvancedQuery = !showAdvancedQuery"
            >高级查询</el-button
          >
        </el-divider>

        <el-collapse-transition>
          <div v-if="showAdvancedQuery">
            <search-input
              label="authorization"
              v-model="searchForm.authorization"
              :search="getData"
            />
            <search-input
              label="客户端IP"
              v-model="searchForm.clientHost"
              :search="getData"
            />

            <search-select
              label="请求方式"
              v-model="searchForm.method"
              :dics="[
                { label: 'GET', value: 'GET' },
                { label: 'POST', value: 'POST' },
                { label: 'PUT', value: 'PUT' },
                { label: 'DELETE', value: 'DELETE' },
              ]"
              :search="getData"
            />
            <search-input
              label="响应状态码"
              v-model="searchForm.status"
              :search="getData"
            />

            <search-input
              label="模糊请求地址"
              v-model="searchForm.fuzzyRequestUri"
              :search="getData"
            />
            <search-input
              label="模糊客户端引擎"
              v-model="searchForm.fuzzyUserAgent"
              :search="getData"
            />

            <el-form-item label="请求时长">
              <el-input-number
                v-model="searchForm.minDuration"
                :min="0"
                :max="10000000"
                @change="getData(1)"
              />
              -
              <el-input-number
                v-model="searchForm.maxDuration"
                :min="1"
                :max="10000000"
                @change="getData(1)"
              />
            </el-form-item>

            <el-divider>全文检索</el-divider>

            <search-input
              label="请求参数"
              v-model="searchForm.matchParameters"
              :search="getData"
            />
            <search-input
              label="响应结果"
              v-model="searchForm.matchJsonResult"
              :search="getData"
            />
            <search-input
              label="错误信息"
              v-model="searchForm.matchErrorMsg"
              :search="getData"
            />
          </div>
        </el-collapse-transition>

        <el-form-item style="width: 100%; margin-top: 20px; text-align: center">
          <search-button :search="getData" />
          <reset-button :search-form="searchForm" :search="getData" />
        </el-form-item>
      </el-form>
    </div>

    <el-card class="jaguar-table">
      <div>总条目数：{{ page.total }}</div>

      <el-table
        class="jaguar-table"
        :data="tableData"
        v-loading="loading"
        table-layout="auto"
      >
        <template #header> 123 </template>
        <el-table-column type="index" width="60" />
        <el-table-column prop="serverId" label="所属服务" />
        <el-table-column label="创建人">
          <template #default="scope">
            <span v-if="scope.row.createBy">
              {{ scope.row.createBy }}
              <div v-if="scope.row.createUserId">
                ({{ scope.row.createUserId }})
              </div>
            </span>
            <span v-else>匿名</span>
          </template>
        </el-table-column>

        <el-table-column label="authorization" show-overflow-tooltip>
          <template #default="scope">
            <div class="multi-line-ellipsis">
              {{ scope.row.authorization }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="clientHost" label="客户端">
          <template #default="scope">
            {{ scope.row.clientHost }}
            <div>
              {{ scope.row.userAgent }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="requestUri" label="请求接口">
          <template #default="scope">
            {{ scope.row.apiOperation }}
            <div>
              {{ scope.row.requestUri }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="请求方式|状态码|耗时">
          <template #default="scope">
            {{ scope.row.method }} | {{ scope.row.status }} |
            {{ scope.row.duration }}
          </template>
        </el-table-column>

        <el-table-column prop="accessTime" label="访问时间" />

        <el-table-column label="操作">
          <template #default="scope">
            <view-button @click="handleView(scope.row)" />
          </template>
        </el-table-column>

        <template #append>
          <div v-if="loadFinished" class="table-bottom">我也是有底线的</div>
          <div v-else @mouseover="load" class="table-bottom">加载更多</div>
        </template>
      </el-table>
    </el-card>

    <Edit :dialog="dialog" />
  </div>
</template>
<script>
import { fetchList, fetchApiOperation } from '@/api/log/handlerLog'
import Edit from './Edit'

export default {
  name: 'HandlerLog',
  data() {
    return {
      loading: false,
      tableData: [],
      searchForm: {},
      page: {
        total: 0,
      },
      dialog: {
        entity: null,
        operation: null,
        visible: false,
      },
      loadFinished: false,
      apiOperations: [],
      showAdvancedQuery: false,
    }
  },
  components: {
    Edit,
  },
  mounted() {
    this.getData()
    this.fetchApiOperation()
  },
  methods: {
    getData() {
      if (this.loading) return

      this.searchForm.accessStartTime = null
      this.searchForm.accessEndTime = null
      if (this.searchForm.accessTime) {
        if (this.searchForm.accessTime.length > 0) {
          this.searchForm.accessStartTime = this.searchForm.accessTime[0]
        }
        if (this.searchForm.accessTime.length > 1) {
          this.searchForm.accessEndTime = this.searchForm.accessTime[1]
        }
      }

      this.loading = true
      fetchList(Object.assign({}, this.searchForm))
        .then((res) => {
          let data = res.data.data
          this.tableData = data.records
          this.page.total = data.total

          this.loadFinished = this.page.total == this.tableData.length
        })
        .finally(() => {
          this.loading = false
        })
    },
    load() {
      if (this.loading) return

      let maxId = -1
      if (this.tableData.length > 0) {
        maxId = this.tableData[this.tableData.length - 1].id
      }

      this.searchForm.accessStartTime = null
      this.searchForm.accessEndTime = null
      if (this.searchForm.accessTime) {
        if (this.searchForm.accessTime.length > 0) {
          this.searchForm.accessStartTime = this.searchForm.accessTime[0]
        }
        if (this.searchForm.accessTime.length > 1) {
          this.searchForm.accessEndTime = this.searchForm.accessTime[1]
        }
      }

      this.loading = true
      fetchList(
        Object.assign(
          {
            maxId,
          },
          this.searchForm
        )
      )
        .then((res) => {
          let data = res.data.data
          if (data.records.length == 0) {
            this.loadFinished = true
            return
          }

          this.tableData = this.tableData.concat(data.records)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleView(row) {
      this.dialog.entity = row
      this.dialog.operation = 3
      this.dialog.visible = true
    },
    fetchApiOperation() {
      fetchApiOperation().then((res) => {
        this.apiOperations = res.data.data
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.table-bottom {
  height: 60px;
  line-height: 60px;
  text-align: center;
}
</style>
